
import styles from './Toolbar.module.css'
interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
  style?: React.CSSProperties
}

function Toolbar({ style, ...props }: ToolbarProps): JSX.Element {
  return (
    <div className={styles.toolbar} style={style} {...props}>
      <ul>
        <li>
          <span>File</span>
          <div className="submenu">
            <div>New</div>
            <div>Open</div>
            <div>Save</div>
          </div>
        </li>
        <li>
          <span>View</span>
          <div className="submenu">
            <div>Zoom In</div>
            <div>Zoom Out</div>
            <div>Reset Zoom</div>
          </div>
        </li>
        <li>
          <span>Command</span>
          <div className="submenu">
            <div>Run</div>
            <div>Debug</div>
            <div>Terminate</div>
          </div>
        </li>
        <li>
          <span>Chart</span>
          <div className="submenu">
            <div>Line Chart</div>
            <div>Bar Chart</div>
            <div>Pie Chart</div>
          </div>
        </li>
      </ul>
    </div>
  )
}

export default Toolbar
